<script setup>
import Marquee from "@/components/Marquee/Marquee.vue";
import MarqueeItem from "@/components/Marquee/MarqueeItem.vue";

import Tab from "@/components/Tab/Tab.vue";
import TabItem from "@/components/Tab/TabItem.vue";
import MeetingProcess from "@/components/MeetingProcess/MeetingProcess.vue";
import Qa from "@/components/Qa/Qa.vue";

import {
  main,
  intro,
  xxzp,
  meetingProcess,
  question,
  photos,
  subject,
  guest,
  meetingData,
} from "@/assets/data/hqb.js";

const stickyBtnRef = ref(null);
const topRef = ref(null);

const ob = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      stickyBtnRef.value.classList.add("scale-0");
    } else {
      stickyBtnRef.value.classList.remove("scale-0");
    }
  });
});

onUnmounted(() => {
  ob.disconnect();
});

onMounted(() => {
  ob.observe(topRef.value);

  setTimeout(() => {
    const { height } = document.body.getBoundingClientRect();

    const iframe = top.document.querySelector("iframe");

    console.log("body height", height, "iframe");
    console.dir(iframe);
    if (iframe) {
      iframe.style.height = `${height}px`;
    }
  }, 0);
});
</script>

<template>
  <div class="1lg:p-4">
    <div class="relative overflow-hidden rounded" ref="topRef">
      <!-- <img :src="main.bgimg" class="object-cover w-full h-32 sm:h-auto lg:h-48" /> -->
      <img src="/static/hqb/h.png" class="object-cover w-full" />
      <div
        class="absolute flex flex-col justify-around w-[90%] border rounded md:w-2/4 top-[20%] border-indigo-500/0 left-[5%] md:left-8 bg-indigo-500/20 md:bg-indigo-500/0 backdrop-blur md:backdrop-blur-0 h-3/4 md:h-1/2"
      >
        <h2 class="px-2 text-lg text-center text-white truncate md:text-4xl">
          <h5 class="text-center text-white truncate md:text-2xl md:mb-4">
            {{ main.subtitle }}
          </h5>
          {{ main.title }}
        </h2>

        <div class="flex items-center justify-center">
          <a
            target="_blank"
            :href="main.link"
            class="px-8 py-2 text-lg text-white transition rounded ring-2 ring-white/80 bg-white/20 hover:bg-indigo-900/10 hover:text-white md:text-xl md:py-4 md:px-16 md:font-medium animate-bounce hover:animate-[bounce_10000s_infinite]"
            >报名信息</a
          >

          <!-- <a target="_blank" :href="main.link"
            class="inline-block px-10 py-2 text-white transition rounded shadow-md text-md md:px-20 md:py-6 md:text-xl bg-black/10 ring-2 ring-indigo-100/80 bg-gradient-to-r from-indigo-600 to-cyan-600 shadow-indigo-400/50 hover:scale-105">立即报名</a> -->
        </div>
      </div>
    </div>

    <!-- 现场照片 -->
    <!-- <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">现场照片</h5>
      <Marquee class="p-2" :speed="2">
        <MarqueeItem v-for="d, i in [...photos, ...photos]" :key="i">
          <div class="w-32 h-32 overflow-hidden rounded bg-slate-100">
            <img :src="d.url" class="object-cover w-full h-full" />
          </div>
        </MarqueeItem>
      </Marquee>
    </div> -->
    <div class="p-2 mt-4 border rounded">
      <div class="flex justify-center">
        <a
          href="https://premiumpro.learningmall.cn/activity/form?id=6"
          target="_blank"
          class="text-center p-2 px-8 border border-blue-500 text-blue-500 rounded transition hover:bg-blue-500 hover:text-white"
          >最终报告提交</a
        >
      </div>
    </div>

    <!-- 介绍 -->
    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">{{ intro.title }}</h5>
      <pre class="px-2 whitespace-pre-line text text-slate-700">
        {{ intro.content }}
      </pre>
    </div>

    <!-- 竞赛主旨 -->
    <div class="relative mt-4 overflow-hidden rounded">
      <img
        :src="subject.bgimg"
        class="object-cover w-full h-40 md:h-auto lg:h-48"
      />
      <div class="absolute top-0 left-0 flex w-full h-full p-6">
        <img
          :src="subject.img"
          class="object-cover w-20 h-full rounded sm:w-48"
        />
        <div class="flex-1 ml-4 overflow-auto text-sm text-white md:text-base">
          <h5 class="text-lg">{{ subject.title }}</h5>
          <div
            class="rounded md:bg-white/10 md:py-6 md:px-4 md:mt-4 md:backdrop-blur"
          >
            {{ subject.content }}
          </div>
        </div>
      </div>
    </div>

    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">竞赛主题</h5>
      <div class="">
        结合当今世界广为关注的热点领域和金融行业的具体需求，以团队为单位，提出具有商业化前景的金融科技解决方案。选题方向如下：
      </div>
      <div>1.自选任何金融信息技术领域相关课题，或</div>
      <div>
        2.从以下“花旗挑战”项目中任择其一，并将有机会赢得额外的单项特别奖。
      </div>
      <img src="/static/hqb/5.jpg" class="w-full" />
      <img src="/static/hqb/6.jpg" class="w-full" />
    </div>

    <!-- 参赛对象，专业，报名及规则 -->
    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">大赛说明</h5>
      <div class="p-2 mb-2 text-slate-500">
        大赛进展通报、大赛详细说明及评选规则请关注“花旗杯”官网、通过邮件或电话咨询大赛组委会。花旗金融信息服务（中国）有限公司拥有本次大赛的最终解释权。
        花旗金融信息服务(中国)有限公司拥有本次大赛的最终解释权。
      </div>
      <div class="grid gap-4 p-2 rounded sm:grid-cols-2">
        <div class="flex items-center gap-8">
          <h5
            class="p-2 text-center text-indigo-500 rounded w-28 bg-indigo-50 shrink-0"
          >
            参赛对象
          </h5>
          <div class="">在校大学生</div>
        </div>

        <div class="flex items-center gap-8">
          <h5
            class="p-2 text-center text-indigo-500 rounded w-28 bg-indigo-50 shrink-0"
          >
            专 业
          </h5>
          <div class="">
            专业不限（包括但不限于计算机、软件、信息、金融、经济、管理或语言等相关专业）
          </div>
        </div>

        <div class="flex items-center gap-8">
          <h5
            class="p-2 text-center text-indigo-500 rounded w-28 bg-indigo-50 shrink-0"
          >
            指导机构
          </h5>
          <div class="">花旗金融信息科技教育基金项目理事会</div>
        </div>

        <div class="flex items-center gap-8">
          <h5
            class="p-2 text-center text-indigo-500 rounded w-28 bg-indigo-50 shrink-0"
          >
            评审机构
          </h5>
          <div class="">“花旗杯”金融创新应用大赛专家评审委员会</div>
        </div>

        <div class="flex items-center gap-8">
          <h5
            class="p-2 text-center text-indigo-500 rounded w-28 bg-indigo-50 shrink-0"
          >
            竞赛影响力
          </h5>
          <div class="">获奖团队相关信息会在全国相关主流媒体予以报道公布。</div>
        </div>
      </div>

      <!-- <div class="flex flex-col mt-4 ml-2">
        <div class="p-2 text-center text-indigo-500 border-t border-l border-r border-indigo-200 rounded-tl rounded-tr w-28">竞赛影响力</div>
        <div class="p-2 border border-indigo-200 rounded rounded-tl-none">
          获奖团队相关信息会在全国相关主流媒体予以报道公布。
        </div>
      </div> -->
    </div>

    <!-- 议程 -->
    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">大赛日程安排与规则</h5>
      <div>
        <img src="/static/hqb/4.png" class="w-full" />
      </div>
      <MeetingProcess :data="meetingData" />
      <!-- <Tab>
        <TabItem :title="d.title" v-for="d, i in meetingProcess" :key="i">
          <MeetingProcess :data="d.data" />
        </TabItem>
      </Tab> -->
    </div>
    <!-- 竞赛报名及规则 -->
    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">
        评分项，提交文档清单 (需中、英文双语) 与评分点
      </h5>
      <img src="/static/hqb/1.png" class="w-full" />
    </div>

    <!-- 奖励设置 -->
    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">奖励设置</h5>
      <div class="px-2">
        <img src="/static/hqb/2.png" class="w-full" />
        <div>另外，花旗为同学们特别提供实习或工作快速通道机会：</div>
        <img src="/static/hqb/3.png" class="w-full" />
      </div>
    </div>

    <!-- 嘉宾 -->
    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">大赛专家评委名单</h5>
      <div class="p-2 text-sm text-slate-500">
        2023-2024第十九届“花旗杯”大赛专家评委会成员名单（按照姓氏拼音首字母排序）：
      </div>
      <Marquee class="p-2" gap="12">
        <MarqueeItem v-for="(d, i) in [...guest, ...guest]" :key="i">
          <div class="text-center w-36">
            <div
              class="w-20 h-20 m-auto overflow-hidden border border-white rounded-full shadow-xl bg-slate-100"
              v-if="d.url"
            >
              <img
                :src="d.url"
                class="object-cover w-full h-full"
                v-if="d.url"
              />
            </div>
            <div class="py-2 font-medium text-center">{{ d.name }}</div>
            <div class="text-sm text-center">{{ d.role }}</div>
            <div class="mt-1 text-xs text-center text-slate-500">
              {{ d.desc }}
            </div>
          </div>
        </MarqueeItem>
      </Marquee>
    </div>

    <!-- 合作伙伴 -->
    <!-- <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">合作伙伴</h5>
      <Marquee class="p-2" speed="1">
        <MarqueeItem class="py-2" v-for="d, i in [...xxzp, ...xxzp]" :key="i">
          <div class="w-48 h-20 overflow-hidden rounded shadow bg-slate-100 shadow-black/10">
            <img :src="d" class="object-cover w-full h-full" />
          </div>
        </MarqueeItem>
      </Marquee>
    </div> -->

    <!-- <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">合作伙伴</h5>
      <div class="flex flex-wrap gap-2">
        <div class="h-20 overflow-hidden rounded shadow bg-slate-100 shadow-black/10" v-for="d, i in xxzp" :key="i">
          <img :src="d" class="object-cover w-full h-full" />
        </div>
      </div>
    </div> -->

    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">合作伙伴</h5>
      <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
        <div
          class="overflow-hidden rounded"
          v-for="(d, i) in [
            {
              url: 'https://www.citi.com.cn/html/index_cn.html',
              name: '花旗银行（中国）有限公司',
              role: '赞助机构',
            },
            {
              url: 'https://www.sheitc.sh.gov.cn',
              name: '上海市经济和信息化委员会',
              role: '指导单位',
            },
            {
              url: 'https://www.citigroup.com/china/csts/index_cn.html',
              name: '花旗金融信息服务(中国)有限公司',
              role: '主办单位',
            },
            {
              url: 'https://www.xjtlu.edu.cn/zh/',
              name: '西交利物浦大学',
              role: '承办单位',
            },
            {
              url: 'https://www.stefg.org/Default.aspx',
              name: '上海市大学生科技创业基金会',
              role: '承办单位',
            },
            {
              url: 'https://www.xjtlu.edu.cn/zh/study/departments/entrepreneur-college-taicang/',
              name: '西交利物浦大学创业家学院（太仓）',
              role: '联合承办单位',
            },
            {
              url: 'https://www.xjtlu.edu.cn/zh/research/research-institute-of-quantitative-finance',
              name: '西浦数量金融研究院',
              role: '联合承办单位',
            },
            {
              url: 'https://www.xjtlu.edu.cn/zh/study/departments/school-of-intelligent-finance-and-business/',
              name: '西交利物浦大学产金融合学院',
              role: '联合承办单位',
            },
            {
              url: 'https://www.xjtlu.edu.cn/zh/study/departments/entrepreneurship-and-enterprise-hub/',
              name: '西交利物浦大学创业与企业港',
              role: '联合承办单位',
            },
            {
              url: 'https://premium.learningmall.cn',
              name: '西浦学习超市',
              role: '支持单位',
            },
          ]"
          :key="i"
        >
          <a class="flex flex-col h-full rounded" :href="d.url" target="_blank">
            <!-- <div class="w-auto h-20 m-auto overflow-hidden rounded shadow bg-slate-200 aspect-video" v-if="d.url">
              <img :src="d.url" class="object-cover w-full h-full" v-if="d.url" />
            </div> -->
            <div
              class="py-2 font-medium text-center text-indigo-500 bg-indigo-100"
            >
              {{ d.role }}
            </div>
            <div class="h-full p-2 py-4 text-center bg-indigo-50">
              {{ d.name }}
            </div>
          </a>
        </div>
      </div>
    </div>

    <!-- 时间地点 -->
    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">组委会联系方式</h5>
      <div class="grid gap-4 sm:grid-cols-3">
        <div class="flex">
          <span class="text-slate-500 w-28">联系邮箱：</span>
          <div class="flex-1">
            citi.cup@xjtlu.edu.cn; citi.cup.alumni@citi.com
          </div>
        </div>
        <div class="flex">
          <span class="text-slate-500 w-28">联&ensp;系&ensp;人：</span>
          <div class="flex-1">熊琳/ 徐静/ 陈泰然</div>
        </div>
        <div class="flex">
          <span class="text-slate-500 w-28">联系电话：</span>
          <div class="flex-1">0512-88970738/ 021-28960965/ 021-28960898</div>
        </div>
      </div>
    </div>

    <!-- 常见问题 -->
    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">常见问题</h5>
      <div
        v-for="(d, i) in question"
        :key="i"
        class="p-2 py-4 text-slate-700"
        :class="{ 'border-t': i != 0 }"
      >
        <Qa :q="d.q" :a="d.a" />
      </div>
    </div>

    <!-- 版权说明 -->
    <div class="p-2 mt-4 border rounded">
      <h5 class="py-2 mb-2 text-2xl">版权说明</h5>
      <div class="p-2 text-slate-500">
        大赛严格遵守中华人民共和国著作权法和有关知识产权的法律，大赛提交的作品都应注明真实作者和真实出处，作品版权归参赛队所有。大赛组委会有权在大赛涉及的范围内引用、发布、转载在大赛网站中参赛队公开发布的内容，同时承诺对参赛队各自发布的内容保密。大赛组委会对于参赛队发布的作品的原创性及内容所引发的版权、署名权的异议、纠纷不承担任何责任。媒体转载相应内容须事先与原作者和大赛组委会联系。
      </div>
    </div>

    <!-- 底部悬浮报名按钮 -->
    <div
      class="fixed bottom-0 left-0 flex items-center justify-center w-full p-4 transition origin-bottom scale-0 bg-black/50 backdrop-blur"
      ref="stickyBtnRef"
    >
      <a
        target="_blank"
        :href="main.link"
        class="px-16 py-2 text-lg text-white transition rounded ring-2 ring-white/80 bg-white/20 hover:bg-indigo-900/10 hover:text-white md:text-xl md:py-4 md:px-48 md:font-medium"
        >报名信息</a
      >
    </div>

    <div class="px-2 py-1 mt-2 text-xs text-slate-400">
      以上内容由组委会提供，其版权和责任归大赛组委会所有，本站不承担任何与大赛相关的法律责任。
    </div>

    <div class="h-32"></div>
  </div>
</template>
